<template>
	<view class="page">
    <view class="goods-wrap solid-top">
      <view class="flex padding-bottom-sm solid-bottom" @click="navToDetail">
        <view class="block-200 margin-right-sm radius overHidden"><fu-image :src="goodsInfo.goods_thumb" mode="aspectFill"></fu-image></view>
        <view class="flex-sub flex flex-direction justify-between" style="width: 438rpx;">
          <view class="">
            <view class="text-df text-cut-2 text-333 text-weight-500">{{ goodsInfo.goods_name }}</view>
            <view v-if="goodsInfo.key_name" class="text-sm text-cut margin-top-8 text-999 text-weight-400">{{ goodsInfo.key_name }}</view>
            <!-- <view  class="text-sm text-cut margin-top-8 text-999 text-weight-400">提亮，抗初老</view> -->
          </view>
          <view class="flex justify-between">
            <text class="text-sm">
              <!-- <text class="text-999 margin-right-xs">{{ i18n['实际支付'] }}:</text> -->
              <text class="text-bold text-lg text-price text-red">{{ goodsInfo.refund_money }}</text>
            </text>
            <text class="text-sm margin-left">
              <!-- <text class="text-999 margin-right-xs">{{ i18n['申请数量'] }}:</text> -->
              <text class="text-weight-400 text-999">x{{ goodsInfo.num }}</text>
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="text-2f text-df text-weight-500 text-tips">
      {{i18n['为了给您更优的退换货时效和体验，我公司建议优先选择协作快递韵达。']}}
    </view>
    <view class="item-info-wrap">
      <view class="item-info solid-bottom flex justify-between align-center text-lg text-weight-400">
        <view class="_left text-111">
          {{i18n['物流公司']}}
        </view>
        <view class="_right text-bf" @click="chooseLogistics">
          <text class="margin-right-sm">{{company.name?company.name:i18n['请选择']}}</text><text class="cuIcon-right"></text>
        </view>
      </view>
      <view class="item-info solid-bottom flex justify-between align-center text-lg text-weight-400">
        <view class="_left text-111">
          {{i18n['物流单号']}}
        </view>
        <view class="_right text-bf flex-sub">
          <input type="text" :placeholder="i18n['请填写物流单号']" v-model="express_no" placeholder-class="placeholderClass" class="ipt">
        </view>
      </view>
      <view class="item-info solid-bottom flex justify-between align-center text-lg text-weight-400">
        <view class="_left text-111">
          {{i18n['联系电话']}}
        </view>
        <view class="_right text-bf">
          <input type="text" :placeholder="i18n['请填写联系电话']" v-model="mobile" placeholder-class="placeholderClass" class="ipt">
        </view>
      </view>
      <view class="item-info solid-bottom flex justify-between align-center text-lg text-weight-400">
        <view class="_left text-111">
          {{i18n['退换说明']}}
        </view>
        <view class="_right text-bf">
            <input type="text" :placeholder="i18n['请输入(选填)']" v-model="remark" placeholder-class="placeholderClass" class="ipt">
        </view>
      </view>
    </view>
    <view class="margin-top">
      <fu-upload col="4" max="3" @change="handleImageUpload"></fu-upload>
    </view>
		<button :loading="is_click" class="action-btn cu-btn  round" @click="handleSubmit">{{i18n['提交']}}</button>
    <fu-notwork></fu-notwork>
	</view>
</template>

<script>
  import { UploadImage } from '@/common/utils/index';
  import { UPLOAD_IMAGE_URL } from '@/common/config.js';
  import FuUpload from '../../components/fu-upload/fu-upload.vue';
	export default {
    components: { FuUpload },
		data() {
			return {
				id: null,
				sender: null,
				express_no: '',
        is_click:false,
        goodsInfo:{},
        img:[],
        remark:'',//退换说明
        company:{
          name:''
        },
        mobile:''
			};
		},
    onLoad(options) {
    	this.setNavigationBarTitle(this.i18n['填写寄回信息'])
    	const {id, goods} = options;
    	this.id = id;
      this.goodsInfo = JSON.parse(goods);
    	this.chooseExpress();
      uni.$on('company',data=>{
        this.company = data;
      })
    },
    onUnload() {
      uni.$off('company');
    },
		methods: {
      // 去物流
      chooseLogistics(){
        uni.navigateTo({
          url:'/pages/order/afterorder/afterorder-logistics/index'
        })
      },
      handleImageUpload(e) {
        this.img = e;
      },
			// 获取退货地址
			chooseExpress(){
        let that = this
				that.$api.post(global.apiUrls.getGoodsAfterSaleafterExpress,{
					id: that.id,
				}).then(res => {
					if(res.data.code == 1){
            this.mobile = res.data.data.sender.phone;
						// that.sender = {
						// 	address: data.province+data.city+data.area+data.address,
						// 	name: data.name,
						// 	mobile: data.phone,
						// }
					}
				}).catch(err => {
					console.log(err)
				})

			},
			// 提交
			handleSubmit(){
				let that = this;
				if(!that.id) return that.$message.info(this.i18n['无效的售后单']);
        if(!that.company.aid) return that.$message.info(this.i18n['请选择物流公司']);
				if(!that.express_no || !/^[0-9a-zA-Z]*$/g.test(that.express_no)) return that.$message.info(this.i18n['无效的物流单号']);
        if(!that.mobile) return that.$message.info(this.i18n['请输入电话号码']);

				let data = {
					id: that.id,
					express_no: that.express_no,
					express_company_id: that.company.aid,
          mobile:that.mobile,
          remark:that.remark,
          img:this.img.join(',')
				}
        this.$util.debounce(() => {
				that.$api.post(global.apiUrls.getGoodsAfterlog,data)
				.then(res => {
					console.log(res);
					if(res.data.code == 1){
            that.$message.info(this.i18n['物流信息已提交售后,等待商家审核'])
              uni.$emit('onPageUpdata');
						setTimeout(function(){
							uni.navigateBack();
						},800)

					}else{
            that.$message.info(res.msg);
					}

				})
				.catch(err => {
					console.log(err)
				})
        },1000,true)
			},
		}

	}
</script>

<style lang="scss" scoped>
  page{
    background: #FFFFFF;
  }
  .page{
    background: #FFFFFF;
    min-height: 100vh;
  }
.list-item{
	.title{
		width: calc(4em + 40rpx);
		font-size: 28rpx;
	}
	text{
		display: inline-block;
	}
}
.list-item+.list-item{
	margin-top: 20rpx;
}
.action-btn{
	position: fixed;
	left: 32rpx;
	right: 32rpx;
	bottom: 50rpx;
	bottom: calc(50rpx + constant(safe-area-inset-bottom));
	bottom: calc(50rpx + env(safe-area-inset-bottom));
	height: 88rpx;
  background: $bgtheme !important;
  color: $uni-text-color-inverse;
}
.block-200 {
  width: 200rpx;
  min-width: 200rpx;
  height: 200rpx;
  min-height: 200rpx;
  border-radius: 16rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.radius-16 {
  border-radius: 16rpx;
}
.goods-wrap{
  padding: 24rpx 24rpx;
  background: #FFFFFF;
}
.text-2f{
  color: #2F98FE;
}
.text-tips{
  padding: 0 24rpx;
  line-height: 42rpx;
}
.text-111{
  color: #111111;
}
.text-bf,.placeholderClass{
  color: #BFBFBF;
}
.item-info-wrap{
  padding: 0 24rpx;
}
.item-info{
  height: 108rpx;
  line-height: 108rpx;
  width: 100%;
  ._right{
    .ipt{
      height: 108rpx;
      text-align: right;
    }
  }
}
.placeholderClass{
  font-size: 32rpx;
  font-weight: 400;
}
</style>
